<template>
	<view class="pageBg" style="height: 100vh;">
		<!-- #ifdef MP-TOUTIAO -->
		<Head title=" " type="detail" :isBack="false"></Head>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<Head v-if="currentPage!='personal/PersonalIndex'&&currentPage!='company/CompanyIndex'" title=" " type="detail"
			:isBack="false"></Head>
		<!-- #endif -->
		<view class="log_wrapper">
			<view class="welcome">
				<view class="t1">你好！欢迎登录</view>
				<view class="t2" v-if="!single_login" @click="handleChangeLogin">我要{{ utype == 1 ? '求职' : '招聘'}}</view>
			</view>
			<view class="field_cell_group">
				<view class="field_cell" v-if="way == 'pwd'">
					<input class="log_field" type="text" placeholder="请输入手机号/用户名/邮箱" autocomplete="off"
						v-model="formPwd.username" />
					</u-field>
				</view>
				<view class="field_cell" v-if="way == 'pwd'">
					<label>
						<input class="log_field" :password="!showPwd" placeholder="请输入密码" autocomplete="off"
							v-model="formPwd.password" />
					</label>
					<view :class="showPwd ? 'toggle_pwd show' : 'toggle_pwd'" @click="showPwd = !showPwd"></view>
				</view>
				<view class="field_cell" v-if="way == 'code'">
					<label>
						<input class="log_field" type="number" placeholder="请输入手机号" autocomplete="off"
							v-model="formCode.mobile" />
					</label>
				</view>
				<view class="field_cell" v-if="way == 'code'">
					<label>
						<input class="log_field" type="number" placeholder="请输入验证码" autocomplete="off"
							v-model="formCode.code" />
					</label>
					<button class="log_get_btn" @click="sendSms">
						{{sendSmsBtnText}}
					</button>
				</view>
			</view>
			<view class="switch_bar">
				<text class="switch_type" @click="changeWay">
					{{ layout.way_other_text }}
				</text>
				<text class="right_forget" @click="handleClick()">忘记密码?</text>
			</view>
			<view class="btn_group">
				<view class="btn login_btn" @click="handleSubmit">{{ layout.utype_current_text }}登录</view>
				<view class="btn login_reg" @click="handlerReg">没有账号？去注册</view>
			</view>
			<LoginAgree ref="LoginAgree"></LoginAgree>
		</view>
		<TopTips ref="TopTips"></TopTips>
		<Captcha ref="captcha"></Captcha>
		<u-modal v-model="regTipsModal" title="系统提示" content="此操作会退出当前账号，确定退出吗？" show-cancel-button
			@confirm="handerRegTipsModal"></u-modal>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error'
	import http from '@/utils/http'
	import api from '@/api'
	import Captcha from '@/components/captcha/index'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import LoginAgree from "@/components/LoginAgree.vue"
	import {
		getPage
	} from '@/utils/index.js'
	export default {
		name: 'Login',
		props: [
			'goback_custom',
			'utype',
			'single_login',
			'after_login_data',
			'redirect'
		],
		components: {
			Captcha,
			LoginAgree
		},
		data() {
			return {
				regTipsModal: false,
				layout: {
					utype_current_text: '企业',
					utype_other_text: '求职者',
					way_other_text: '验证码登录',
					utype_other_login_route: '',
					utype_current_reg_route: ''
				},
				formPwd: {
					username: '', // ceshia
					password: '' // 123456
				},
				formCode: {
					mobile: '',
					code: ''
				},
				way: 'pwd',
				showPwd: false,
				regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/,
				currentPage: ''
			}
		},
		created() {
			this.$store.commit('clearCountDownFun')
			this.currentPage = getPage('page')
		},
		watch: {
			utype: {
				immediate: true,
				handler(val) {
					if (val == 2) {
						this.formPwd = {
							username: '', //ceshia
							password: '' //123456
						}
					} else if (val == 1) {
						this.formPwd = {
							username: '', //ceashi
							password: '' //123456
						}
					}
					this.initLayout()
				}
			}
		},
		computed: {
			...mapState({
				fieldInputStyle: state => {
					return {
						...state.fieldInputStyle,
					}
				},
				fieldInputPlaceholderStyle: state => {
					return {
						...state.fieldInputPlaceholderStyle
					}
				},
				sendSmsBtnText: state => {
					// console.log(state.sendSmsBtnText)
					return state.sendSmsBtnText
				},
			})
		},
		methods: {
			...mapActions(['getImToken', 'getChatLists']),
			handleClick() {
				uni.navigateTo({
					url: '/member/FindPwd?utype=' + this.utype
				})
			},
			// 退出账号
			handerRegTipsModal() {
				uni.removeStorageSync('loginInfo');
				this.$store.commit('setLoginState', {
					whether: false,
					utype: 0,
					token: '',
					mobile: '',
					userIminfo: {}
				})
				uni.redirectTo({
					url: this.layout.utype_current_reg_route
				})
			},
			// 去注册
			handlerReg() {
				uni.removeStorageSync('loginInfo');
				if (this.$store.state.LoginOrNot) {
					this.regTipsModal = true
				} else {
					uni.navigateTo({
						url: this.layout.utype_current_reg_route
					})
				}
			},
			// 初始化
			initLayout() {
				this.layout.utype_current_text = this.utype === 1 ? '企业' : '求职者'
				this.layout.utype_other_text = this.utype === 1 ? '求职者' : '企业'
				this.layout.utype_other_login_route = this.utype === 1 ? {
					path: '/member/Login',
					query: {
						utype_alias: 'personal'
					}
				} : {
					path: '/member/Login',
					query: {
						utype_alias: 'company'
					}
				}
				this.layout.utype_current_reg_route = this.utype === 1 ? '/member/Reg?utype_alias=company' :
					'/member/Reg?utype_alias=personal'
				if (this.redirect) {
					this.layout.utype_other_login_route = this.layout.utype_other_login_route + '?redirect=' + this
						.redirect
					this.layout.utype_current_reg_route = this.layout.utype_current_reg_route + '?redirect=' + this
						.redirect
				}
			},
			// 密码登录/验证码登录切换
			changeWay() {
				if (this.way === 'pwd') {
					this.way = 'code'
					this.layout.way_other_text = '密码登录'
				} else {
					this.way = 'pwd'
					this.layout.way_other_text = '验证码登录'
				}
			},
			// 密码登录
			doSubmitPwd() {
				if (!this.formPwd.username) {
					this.$refs.TopTips.show({
						title: '请输入手机号/用户名/邮箱',
						type: 'error'
					})
					return false
				}
				if (!this.formPwd.password) {
					this.$refs.TopTips.show({
						title: '请输入密码',
						type: 'error'
					})
					return false
				}
				let postData = {
					...this.formPwd
				}
				postData.utype = this.utype
				http.get(api.login_pwd, postData).then(check_res => {
					let setShow = false
					if (check_res.data == 1) {
						setShow = true
					}
					this.$refs.captcha.show(res => {
						if (res !== undefined) {
							postData.captcha = res
						}
						http
							.post(api.login_pwd, postData)
							.then(response => {
								uni.setStorageSync('loginChecked', false);
								if (parseInt(response.data.code) === 200) {
									this.$store.commit('clearCountDownFun')
									this.$store.commit('setLoginState', {
										whether: true,
										utype: response.data.data.utype,
										token: response.data.data.token,
										mobile: response.data.data.mobile,
										userIminfo: response.data.data.user_iminfo
									})
									uni.setStorageSync('loginInfo', {
										whether: true,
										utype: response.data.data.utype,
										token: response.data.data.token,
										mobile: response.data.data.mobile,
										userIminfo: response.data.data.user_iminfo
									});
									this.updateImToken()
									if (response.data.data.next_code != 200) {
										let res = {
											code: response.data.data.next_code,
											message: ''
										}
										handlerHttpError(res)
									} else {
										uni.setStorageSync('toCompleteCompanyInfo', false)
										uni.setStorageSync('toCompleteResume', false)
										this.$emit('afterLogin', this.after_login_data)
									}
								} else {
									this.$refs.TopTips.show({
										title: response.data.message,
										type: 'error'
									})
								}
							})
							.catch(() => {
								uni.setStorageSync('loginChecked', false);
							})
					}, setShow)
				}).catch(() => {})
			},
			// 验证码登录
			doSubmitCode() {
				if (!this.formCode.mobile) {
					this.$refs.TopTips.show({
						title: '请输入手机号',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.formCode.mobile)) {
					this.$refs.TopTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				let postData = {
					...this.formCode
				}
				postData.utype = this.utype
				http.get(api.login_code, postData).then(check_res => {
					let setShow = false
					if (check_res.data.data == 1) {
						setShow = true
					}
					this.$refs.captcha.show(res => {
						if (res !== undefined) {
							postData.captcha = res
						}
						http
							.post(api.login_code, postData)
							.then(response => {
								uni.setStorageSync('loginChecked', false);
								if (parseInt(response.data.code) === 200) {
									this.$store.commit('clearCountDownFun')
									this.$store.commit('setLoginState', {
										whether: true,
										utype: response.data.data.utype,
										token: response.data.data.token,
										mobile: response.data.data.mobile,
										userIminfo: response.data.data.user_iminfo
									})
									this.updateImToken()
									if (response.data.data.next_code != 200) {
										console.log(response.data.data.next_code,
											'response.data.data.next_code')
										if (response.data.data.next_code ==
											50007) { //个人需要创建简历 -- 跳到个人中心其他操作再提示创建简历
											uni.setStorageSync('toCompleteCompanyInfo', false)
											uni.setStorageSync('toCompleteResume', true)
											uni.redirectTo({
												url: '/personal/PersonalIndex'
											})
										} else if (response.data.data.next_code ==
											50003) { //企业完善信息 -- 跳到个人中心其他操作再提示完善信息
											uni.setStorageSync('toCompleteResume', false)
											uni.setStorageSync('toCompleteCompanyInfo', true)
											uni.redirectTo({
												url: '/company/CompanyIndex'
											})
										} else {
											handlerHttpError({
												code: response.data.data.next_code,
												message: ''
											})
										}

									} else {
										uni.setStorageSync('toCompleteCompanyInfo', false)
										uni.setStorageSync('toCompleteResume', false)
										this.$emit('afterLogin', this.after_login_data)
									}
								} else {
									this.$refs.TopTips.show({
										title: response.data.message,
										type: 'error'
									})
								}
							})
							.catch(() => {
								uni.setStorageSync('loginChecked', false);
							})
					}, setShow)
				}).catch(() => {})
			},
			updateImToken() {
				this.getImToken()
				let imToken = this.$store.state.imToken
				this.$ws.init(imToken);
				// this.getChatLists({
				// 	url: api.chatList
				// });
			},
			// 提交之前的验证
			handleSubmit() {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error'
					})
					return false
				}
				if (this.way == 'pwd') {
					this.doSubmitPwd()
				} else {
					this.doSubmitCode()
				}
			},
			// 发送验证码
			sendSms() {
				if (this.$store.state.sendSmsBtnDisabled) {
					return false
				}
				if (!this.formCode.mobile) {
					this.$refs.TopTips.show({
						title: '请输入手机号',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.formCode.mobile)) {
					this.$refs.TopTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				this.$refs.captcha.show(res => {
					this.$store
						.dispatch('sendSmsFun', {
							url: api.get_login_code,
							mobile: this.formCode.mobile,
							type: this.utype,
							captcha: res
						})
						.then(response => {
							if (response.code === 200) {
								this.$refs.TopTips.show({
									title: this.$store.state.sendSmsMessage,
									type: 'success'
								})
							} else {
								this.$refs.TopTips.show({
									title: this.$store.state.sendSmsMessage,
									type: 'error'
								})
							}
						})
				})
			},
			handleChangeLogin() {
				this.$emit('handleChangeLogin', this.layout.utype_other_login_route)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.log_wrapper {
		margin: 0 42rpx;
	}

	.welcome {
		padding: 100rpx 0 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.t1 {
			color: #2A2A2A;
			font-size: 46rpx;
			font-weight: bold;
		}

		.t2 {
			color: #266DFF;
			font-size: 30rpx;
			padding-left: 38rpx;
			background: url('../static/img/switch.png') no-repeat left center;
			background-size: 27rpx 27rpx;
		}
	}

	.field_cell_group {
		margin-bottom: 0;
	}

	:v-deep.u-field {
		background: rgba(150, 150, 150, 0.06);
		border-radius: 43rpx;
	}

	.log_field {
		border: 0;
		width: 100%;
		display: block;
		color: #222222;
		font-size: 30rpx;
		/* #ifdef MP-WEIXIN */
		padding: 20rpx 0;
		/* #endif */
		/* #ifdef MP-TOUTIAO || MP-ALIPAY */
		padding: 16rpx 0;
		/* #endif */
		background: transparent;

		&::placeholder {
			color: #8A8A8A;
		}
	}

	.has_account {
		text-align: center;
		padding: 52rpx 0;
		font-size: 32rpx;
		color: #999999;
		margin-bottom: 80rpx;

		a {
			color: #333333;
		}
	}

	.log_get_btn {
		position: absolute;
		right: 48rpx;
		top: 50%;
		transform: translateY(-50%);
		border: none;
		padding: 0rpx 0;
		font-size: 30rpx;
		color: #266DFF;
		background-color: transparent;
		z-index: 30;
	}

	.log_get_btn::after {
		content: '';
		border: none;
	}

	.bottom_other_login {
		display: flex;

		.other_cell {
			flex: 1;
			width: 260rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			padding-top: 106rpx;

			&.c_wx {
				background-image: url(../static/img/log_wx.png);
				background-position: center 0;
				background-repeat: no-repeat;
				background-size: 86rpx;
			}

			&.c_qq {
				background-image: url(../static/img/log_qq.png);
				background-position: center 0;
				background-repeat: no-repeat;
				background-size: 86rpx;
			}
		}
	}

	.switch_bar {
		position: relative;
		margin-bottom: 126rpx;
		margin-top: 35rpx;
		/* #ifdef MP-ALIPAY */
		display: flex;
		align-items: center;
		justify-content: space-between;

		/* #endif */
		.right_forget {
			font-size: 30rpx;
			color: #666666;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
	}

	.switch_type {
		display: block;
		width: fit-content;
		font-size: 30rpx;
		color: #266DFF;
	}


	.toggle_pwd {
		position: absolute;
		right: 48rpx;
		top: 50%;
		transform: translateY(-50%);
		height: 70rpx;
		width: 72rpx;
		background-image: url(../static/img/hidden_pwd.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 32rpx;
		z-index: 30;

		&.show {
			background: url(../static/img/show_pwd.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 36rpx;
		}
	}
</style>